<template>
  <el-scrollbar style="height:500px">
    model
    <el-row :gutter="20">
      <el-col :span="7">
        表：<br>
        <textarea
          cols="20"
          rows="5"
          :value="JSON.stringify(modelTable, null, 2)"
        />
        字段：<br>
        <textarea
          cols="20"
          rows="5"
          :value="JSON.stringify(modelColumList, null, 2)"
        />
        <div v-for="(item, key, index) in modelColumList" :key="index">
          {{key}}:{<br>
          <div v-for="(item1, key1, index1) in item" :key="index1">
            &nbsp;&nbsp;{{key1}}:{{item1}}
          </div> }
        </div>
      </el-col>
      <el-col :span="7">
        model：<br>
        const {{modelTable.tableName}} = reactive({ <br>
        <div v-for="(item, key, index) in modelColumList" :key="index">
          &nbsp;&nbsp;{{item.colName}}: '' // {{item.cnName}}, {{item.colType}}
        </div>
        } <hr>
        {{modelTable.tableName}}: { <br>
        <div v-for="(item, key, index) in modelColumList" :key="index">
          &nbsp;&nbsp;{{item.colName}}: '' // {{item.cnName}}, {{item.colType}}
        </div>
        } <hr>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref, reactive, watch } from 'vue'
// eslint-disable-next-line import/no-absolute-path
import VueDS from '/nf-state'

</script>

<script setup>
// eslint-disable-next-line import/no-absolute-path
import elGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'

// 表单的 model
const dataList = reactive([])
const dataRow = ref({})

// 定义表单的 meta
const girdProps = reactive({
  controlId: 1,
  colOrder: [],
  itemMeta: {},
  reload: false
})

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta

// 根据数据设置表单需要的meta
const setGridMeta = () => {
  dataRow.value = {}
  for (const key in modelColumList) {
    const item = modelColumList[key]
    // console.log(key, item)
    const colId = parseInt(item.columnId)
    // 添加 colOrder
    if (!girdProps.colOrder.includes(colId)) {
      girdProps.colOrder.push(colId)
    }
    // 添加 itemMeta
    girdProps.itemMeta[colId] = {
      id: colId,
      colName: item.colName,
      label: item.cnName,
      width: 140,
      title: item.cnName,
      align: 'center',
      'header-align': 'center'
    }
    dataRow.value[item.colName] = item.cnName
  }

  girdProps.reload = !girdProps.reload
  // 添加测试数据
  dataList.length = 0
  for (const item of [1, 2, 3].values()) {
    const newRow = {}
    Object.assign(newRow, dataRow.value)
    dataList.push(newRow)
  }
}

watch(() => modelColumList, () => {
  setGridMeta()
},
{ deep: true })

</script>
